<!DOCTYPE html> 
<html> 
<head> 
	<title>Lobby</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="jquery.mobile-1.2.0.css" />
	<script src="jquery-1.8.1.min.js"></script>
	<script src="jquery.mobile-1.2.0.min.js"></script>
	<script src="login.js"></script>
	<script type="text/javascript" src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
	
	<script>
		$(document).ready(function(){
			alert(getUsername() + ", " + getPassword());
			storageLogin();
			
		
		});
		
		function checkStorageLogin(){
			if(getUsername() != null){
				return true;
			} else {
				return false;
			}
		}
		
		function storageLogin()
		{
			if(checkStorageLogin() == true){
				$.getJSON('../rest/lobby/login?username=' + getUsername() + "&password=" + getPassword(), function(data) {
					var username = data['username'];
					var cash = data['cashTotal'];
					alert(username);
					if(username && cash != null){
						$('#loginScreen').hide();
						$('#tableList').show();
					} else {
						$('#warningField').html("Wrong credentials!");
					}
				});
			} else {
				$('#tableList').hide();
				$('#loginScreen').show();
			}
			
		}

		function login(){
			$.getJSON('../rest/lobby/login?username=' + $('#username').val() + "&password=" + $('#password').val(), function(data) {
				var username = data['username'];
				var cash = data['cashTotal'];
				if(username != null && cash != null){
					$('#loginScreen').hide();
					$('#tableList').show();
					$('#warningField').html("Succesfully Logged On");
				} else {
					alert('DOEI');
					$('#warningField').html("Wrong credentials!");
				}
				setLogin(username, $('#password').val());
				
				setId(data['id']);
			});
		}
		
		
	</script>
</head> 
<body> 

<div data-role="page" id="listpage">
	<div data-role="header">
		<h1>Lobby</h1>
	</div>

	<div data-role="content">	
	
	<div id="warningField">
		
	</div>
	
		<div id="tableList">
			<ul data-role="listview" data-inset="true" >
				<li><a href="table.html?id=1" data-transition="slide">Table 1</a></li>
				<li><a href="table.html?id=2" data-transition="slide">Table 2</a></li>
				<li><a href="table.html?id=3" data-transition="slide">Table 3</a></li>
				<li><a href="table.html?id=4" data-transition="slide">Table 4</a></li>
				<li><a href="table.html?id=5" data-transition="slide">Table 5</a></li>
				<li><a href="table.html?id=6" data-transition="slide">Table 6</a></li>
			</ul>	
		</div>
		<div id="loginScreen" style="display:none">
			<label for="username">Username:</label>
    		<input type="text" name="username" id="username" value=""  />
    		<label for="password">Password:</label>
    		<input type="password" name="password" id="password" value=""  />
    		<input type="button" value="Log in!" onclick="login()" />
		</div>
	</div>
</div>
</body>
</html>